<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ include file="head.jsp"%>

<!-- 列表的url变量 -->
<c:set var="userListUrl" value="${baseurl }/admin/user/list/"></c:set>
<c:set var="searchParam"
	value="?id=${su.id}&username=${su.username}&createtime=${su.createtime}&"></c:set>


<script>
	//删除的url(单个)
	var deluserUrl = "${baseurl}/admin/user/del";
	//多个
	var delusersUrl = "${baseurl}/admin/user/dels";

	$(function() {
		
		//操作的选择框也默认不选中
		$("#select_uid").prop("checked" , false);
		//页面加载的时候强制让所有 删除选择框都不选
		$(".ids").each(function(i) {
			$(this).prop("checked" , false);
		})
		

		//时间插件
		$('#datetimepicker').datetimepicker({
			language : 'zh-CN',
		/* weekStart: 1,
		todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
		showMeridian: 1 */
		});

		//删除管理员
		$(".deluser").click(function() {
			var id = $(this).data("id");
			var username = $(this).data("name");
			//要存一下当前的this对象，因为在$.post中this对象已经不在指向当前所选择节点（元素）
			var _this = $(this);

			if (confirm("确定要删除 " + username + " 吗?")) {
				//发送ajax 请求
				$.post(deluserUrl, {
					"userId" : id
				}, function(data, s, x) {
					if (data.code == 1) {
						//刷新当前页面
						//location.reload();
						//删除节点
						_this.parent().parent().remove();

					} else {
						//显示提示信息
						alert(data.msg)
					}
				})
			}

		})

		//全选
		$("#select_uid").click(function() {
			var c = $(this).prop("checked"); //attr 会有问题
			$(".ids").prop("checked", c);
		})

		//批量删除
		$("#delusers").click(function() {
			if (confirm("确定要删除所选吗?")) {
				var ids = [];
				//遍历所有元素
				$(".ids").each(function(i) {
					//如果是选中的元素放到数组中
					if ($(this).prop("checked")) {
						ids.push($(this).val())
					}
				})
				//数组拆分字符串
				var idsStr = ids.join(",")
				console.log(idsStr);
				
				$.post(delusersUrl , {"ids" : idsStr}  , function(data , s , x){
					if(data.code == 1){
						//刷新当前页面
						location.reload();
					} else {
						alert(data.msg);
					}
				})
				
			}

		})

	})
</script>

<script src="${baseurl}/resources/admin/js/user_list.js"></script>



	<div class="row">
		<ol class="breadcrumb">
			<li><a href="${baseurl }/admin">首页</a></li>
			<li class="active">管理员列表</li>
		</ol>
		<a href="${baseurl }/admin/user/addview"><button type="button" class="btn btn-success">新增</button></a>
		<button id="delusers" type="button" class="btn btn-danger">批量删除</button>
		<table class="table table-striped table-bordered table-hover">
			<caption></caption>
			<thead>
				<tr>
					<th><input type="checkbox" id="select_uid" /></th>
					<th>ID</th>
					<th>用户名</th>
					<th>头像</th>
					<th>注册时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<form action="${userListUrl}1">
						<th></th>
						<th scope="row"><input type="text" class="form-control "
							name="id" id="" value="${su.id }" placeholder=""></th>
						<td><input type="text" class="form-control " name="username"
							id="" value="${su.username }" placeholder=""></td>
						<td><input type="datetime" class="form-control" id=""
							placeholder="" disabled="disabled"></td>
						<td><input id="datetimepicker"
							data-date-format="yyyy-mm-dd H:m:s" type="text" name="createtime"
							class="form-control " value="${su.createtime }" id=""
							placeholder=""></td>
						<td>
							<button type="submit" class="btn btn-primary">搜索</button>
						</td>
					</form>
				</tr>


				<c:forEach items="${usermap.userlist }" var="user">
					<tr>
						<th scope="row"><input type="checkbox" class="ids" name="ids" 
							value="${user.id }" /></th>
						<th scope="row">${user.id }</th>
						<td>${user.username }</td>
						<td><img width="50" data-action="zoom" src="${baseurl }${user.head_portrait }"/></td>
						<td>${user.createtime }</td>
						<td>
							<a href="${baseurl }/admin/user/details/${user.id}"><button type="button" class="btn btn-success  btn-xs">详情</button></a>
							<a href="${baseurl }/admin/user/updateview/${user.id}">
								<button type="button" class="btn btn-info  btn-xs">编辑</button>
							</a>
							<a href="${baseurl }/admin/user/restpwview/${user.id}">
								<button type="button" class="btn btn-warning  btn-xs">重置密码</button>
							</a>
							<button type="button" class="btn btn-default  btn-xs myRole" 
							data-toggle="modal" data-url="${baseurl }/admin/user/selectrolelist" 
							data-uid="${user.id }"
							data-target="#myModal">配置角色</button>
							
							<button type="button" data-id="${user.id }"
								data-name="${user.username }"
								class="btn btn-danger  btn-xs deluser">删除</button>

						</td>
					</tr>
				</c:forEach>

			</tbody>

			<tfoot>
				<tr>
					<td colspan="5" align="center"><c:if
							test="${usermap.page == 0 }">
							<h5>没有任何数据</h5>
						</c:if> <c:if test="${usermap.page != 0 }">

							<nav aria-label="Page navigation">
								<ul class="pagination">
									<li><a href="${userListUrl}1${searchParam}"
										aria-label="Previous"> <span aria-hidden="true">首页</span>
									</a></li>
									<!-- 如果已经是第一页则给一个禁用样式 -->
									<li class='<c:if test="${p - 1 <= 0 }"> disabled </c:if>'>

										<!-- 判断是否显示上一页的链接 --> <c:if test="${p - 1 > 0 }">
											<a href="${userListUrl}${p - 1 }${searchParam}"
												aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
											</a>
										</c:if> <c:if test="${p - 1 <= 0 }">
											<a aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
											</a>
										</c:if>

									</li>

									<!-- 循环输出页码 -->
									<c:forEach begin="1" end="${usermap.page}" var="i">
										<li class="<c:if test='${i == usermap.p}'>active</c:if>"><a
											href="${userListUrl}${i }${searchParam}">${i }</a></li>
									</c:forEach>

									<!-- 如果已经是最后一页则给一个禁用样式 -->
									<li
										class='<c:if test="${p + 1 > usermap.page }"> disabled </c:if>'>

										<!-- 判断是否显示下一页的链接 --> <c:if test="${p + 1 <= usermap.page}">
											<a href="${userListUrl}${p + 1 }${searchParam}"
												aria-label="Next"> <span aria-hidden="true">&raquo;</span>
											</a>
										</c:if> <c:if test="${p + 1 > usermap.page }">
											<a aria-label="Previous"> <span aria-hidden="true">&raquo;</span>
											</a>
										</c:if>

									</li>

									<li><a href="${userListUrl}${usermap.page}${searchParam}"
										aria-label="Previous"> <span aria-hidden="true">末页</span>
									</a></li>
								</ul>
							</nav>

						</c:if></td>
				</tr>

			</tfoot>
		</table>

	</div>
	
	
	<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">角色配置</h4>
			</div>
			<div class="modal-body">
				
				<!-- 响应式表格 -->
					<div id="UserRole" class="table-responsive">
						<form>
							<table class="table table-hover table-bordered">
								<thead>
									<tr>
										<th><input id="allRole" type="checkbox" value=""></th>
										<th>角色名称</th>
										<th>备注</th>
									</tr>
								</thead>
								<tbody id="roleData">

								</tbody>
								<tfoot>

								</tfoot>
							</table>
						</form>
					</div>
			
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button data-url="${baseurl }/admin/user/updaterole" id="userRoleSubmit" type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>



<%@ include file="footer.jsp"%>




